<template>
    <n-form ref="formRef" :model="formData" :rules="rules">
        <n-form-item label="会议室名称" path="name">
            <n-input
                v-model:value="formData.name"
                placeholder="请输入会议室名称"
            />
        </n-form-item>
        <n-grid :cols="2" :x-gap="10">
            <n-form-item-gi label="会议室面积(㎡)" path="area">
                <n-input-number
                    v-model:value="formData.area"
                    min="0"
                    placeholder="请输入面积"
                />
            </n-form-item-gi>
            <n-form-item-gi label="会议室容量(人)" path="capacity">
                <n-input-number
                    v-model:value="formData.capacity"
                    min="0"
                    placeholder="请输入容量"
                />
            </n-form-item-gi>
        </n-grid>

        <n-grid :cols="2" :x-gap="10">
            <n-form-item-gi label="会议室类型" path="type">
                <n-select
                    v-model:value="formData.type"
                    :options="roomTypeOptions"
                />
            </n-form-item-gi>
            <n-form-item-gi label="每小时租金(元)" path="hourlyRate">
                <n-input-number
                    v-model:value="formData.hourlyRate"
                    min="0"
                    placeholder="请输入每小时租金"
                />
            </n-form-item-gi>
        </n-grid>
        <n-form-item label="设备支持">
            <n-checkbox
                v-model:checked="formData.device.speaker"
                label="扬声器"
            />
            <n-checkbox
                v-model:checked="formData.device.projector"
                label="投影仪"
            />
            <n-checkbox
                v-model:checked="formData.device.internet"
                label="互联网"
            />
        </n-form-item>
    </n-form>
    <div class="w-full flex justify-end gap-10px">
        <n-button
            v-if="model === 'create'"
            :focusable="false"
            @click="generateRoom"
            text
        >
            <n-icon :component="ReloadOutline" :size="18" />
        </n-button>
        <n-button :focusable="false">重置</n-button>
        <n-button type="primary" :focusable="false" @click="handleSubmitForm">
            确认
        </n-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { MeetingRoom } from "@/service/api/types/room";
import type { FormInst, FormRules } from "naive-ui";

import { ReloadOutline } from "@vicons/ionicons5";

import _ from "lodash";

const props = defineProps<{
    data: MeetingRoom | null;
    model: "create" | "update";
}>();

const emits = defineEmits<{
    (e: "submit", data: MeetingRoom): void;
}>();

const formRef = ref<FormInst | null>(null);
const formData = ref<MeetingRoom>({
    name: "",
    area: 0,
    capacity: 0,
    type: "classroom",
    device: {
        speaker: false,
        projector: false,
        internet: false,
    },
    hourlyRate: 0,
    createdDate: new Date(new Date().toLocaleDateString()).getTime(),
});

const rules: FormRules = {
    name: [
        {
            required: true,
            validator: (_, value) => {
                if (value.length < 3 || !value) {
                    return new Error("请输入至少三位长的名称");
                }
                return true;
            },
            trigger: ["input", "blur"],
        },
    ],
    area: [
        {
            required: true,
            validator: (_, value) => {
                if (value <= 0) {
                    return new Error("请输入正确的面积");
                }
                return true;
            },
            trigger: ["input", "blur"],
        },
    ],
    capacity: [
        {
            required: true,
            validator: (_, value) => {
                if (value <= 0) {
                    return new Error("请输入正确的容量");
                }
                return true;
            },
            trigger: ["input", "blur"],
        },
    ],
    hourlyRate: [
        {
            required: true,
            validator: (_, value) => {
                if (value <= 0) {
                    return new Error("请输入正确的租金");
                }
                return true;
            },
            trigger: ["input", "blur"],
        },
    ],
};

const roomTypeOptions = [
    {
        label: "教室型",
        value: "classroom",
    },
    {
        label: "圆桌型",
        value: "roundtable",
    },
];

onMounted(() => {
    if (props.data) {
        formData.value = _.cloneDeep(props.data);
    }
});

const generateRoom = () => {
    const room: MeetingRoom = {
        name: `会议室_${_.random(100, 999)}`,
        area: _.random(60, 200),
        capacity: _.random(50, 500),
        type: _.sample(["classroom", "roundtable"]),
        device: {
            speaker: _.random(0, 1) === 1,
            projector: _.random(0, 1) === 1,
            internet: _.random(0, 1) === 1,
        },
        hourlyRate: _.random(50, 500),
        createdDate: new Date(new Date().toLocaleDateString()).getTime(),
    };
    formData.value = room;
};

const handleSubmitForm = async () => {
    try {
        await formRef.value?.validate();
        emits("submit", formData.value);
    } catch (err) {
        window.NMessage.error((err as Error).message || "请完成表单");
    }
};
</script>

<style scoped></style>
